<template>
  <el-dialog
    title="关联项目课题"
    :visible.sync="isOpen"
    :destroy-on-close="true"
    width="60%"
    @close="closeDialog"
  >
    <div class="pass-list-table">
      <el-table
        v-loading="loading"
        border
        highlight-current-row
        size="medium"
        :data="tableList"
        @current-change="handleCurrentChange"
      >
        <el-table-column label="需求编号" align="center" prop="demand_no" width="100" />
        <el-table-column
          label="项目名称"
          align="center"
          prop="project_name"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="项目类型" align="center" prop="project_type" width="120" />
        <el-table-column label="状态" align="center" prop="demand_status" width="100">
          <template>
            <p class="status-color6">已通过</p>
          </template>
        </el-table-column>
        <el-table-column
          label="需求来源"
          align="center"
          prop="demand_source"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="优先级" align="center" prop="priority" width="100">
          <template slot-scope="scope">
            <div>
              <p class="status-color1"><span>{{ scope.row.priority }}</span><i
                class="el-icon-top"
              /></p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建人" align="center" prop="creator_name" width="120" />
        <el-table-column label="创建时间" align="center" prop="created_at" />
      </el-table>
    </div>
    <div
      slot="footer"
      style="display:flex;justify-content:center;align-items:center;"
      class="dialog-footer"
    >
      <el-button plain @click="createProject">直接创建</el-button>
      <el-button type="primary" @click="selectConfrim">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { searchPassRequire } from '@/api/requirement'
export default {
  data() {
    return {
      isOpen: false,
      loading: false,
      tableList: [],
      currentRow: null
    }
  },
  created() {
    // this.getSearchPassRequire();
  },
  methods: {
    getSearchPassRequire() {
      const datas = { select_str: '' }
      searchPassRequire(datas).then((res) => {
        if (res.code == 200) {
          this.tableList = res.data.data || []
        }
      })
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row)
    },
    handleCurrentChange(val) {
      this.currentRow = val
    },
    closeDialog() {
      this.isOpen = false
      this.currentRow = null
    },
    // 取消按钮
    close() {
      this.isOpen = false
    },
    // 打开弹框
    open() {
      this.getSearchPassRequire()
      this.isOpen = true
    },
    createProject() {
      this.currentRow = null
      this.$router.push({
        name: 'createEdit'
      })
      this.close()
    },
    selectConfrim() {
      if (this.currentRow == null) {
        this.$message({
          type: 'error',
          message: '请选择相关课题',
          duration: 1500
        })
      } else {
        this.$router.push({
          name: 'createEdit',
          query: {
            types: 1,
            requireId: this.currentRow.id
          }
        })
        this.close()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.pass-list-table {
  ::v-deep .el-table__body tr.current-row > td {
    background-color: #ddedff;
  }
}
</style>
